<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" title="添加代理商" width="980px">
      <el-row :gutter="10">
        <el-col :span="4" class="title">代理商注册链接:</el-col>
        <el-col :span="16">
          <el-input v-model="linkUrl"/>
        </el-col>
        <el-col :span="4" class="button">
          <el-button type="primary" size="small" class="tag-read" @click="handleCopy" >复制链接</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4" class="title">代理商注册二维码:</el-col>
        <el-col :span="20">
          <canvas ref="msg">二维码</canvas>
          <div class="tip">(注：右键另存为或截图保存)</div>
          <div>提示：通过上方链接或二维码注册成功后，会自动成为网校一级代理商。</div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from 'qrcode'
import Clipboard from 'clipboard'
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    dialogVisible() { return this.data.dialog },
    linkUrl() { return this.data.linkUrl }
  },
  mounted() {
    this.createQR()
  },
  methods: {
    handleClose() {
      this.$emit('addClosed')
    },
    createQR() {
      setTimeout(() => {
        const msg = this.$refs.msg
        QRCode.toCanvas(msg, this.linkUrl)
      }, 50)
    },
    handleCopy() {
      // 复制地址
      const _this = this
      new Clipboard('.tag-read', {
        text: function() {
          return _this.linkUrl
        }
      })
      this.$message({
        type: 'success',
        message: '复制成功'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-weight: 900;
  text-align: right;
  height: 36px;
  line-height: 36px;
}
.button {
  height: 36px;
  line-height: 36px;
}
.tip {
  color: #ccc;
  margin-top: 5px;
  margin-bottom: 20px;
}
</style>
